<template>
  <div class="event-table">
    <el-dialog
      v-model="$mapStore.eventTableShow"
      width="50%"
      :close-on-click-modal="false"
    >
    <div class="expandContent">
        <div class="button-group" style="margin-top: 10px;">
        <el-button type="success" @click="handleHeatMap">生成事件热力图</el-button>
      <el-button type="primary" @click="$mapStore.setEventCountChartShow(true)">生成事件统计图</el-button>
      <el-button type="info" @click="exportTableData">导出excel表格&nbsp;<i class="iconfont icon-Excel" style="color: black;"></i></el-button>
      <div style="float: right;">
        <el-button type="info" circle plain  @click="handleSummaryUp"><i class="iconfont icon-xiajiantou"></i></el-button>
      <el-button type="info" circle plain @click="handleSummarydown"><i class="iconfont icon-shangjiantou"></i></el-button>
      <el-button type="info" circle  @click="tableDataRefresh"><i class="iconfont icon-shuaxin1"></i></el-button>
      </div>
      </div>
      <el-table :data="tableData" height="250" style="width: 100%" :row-class-name="tableRowClassName" >
        <el-table-column prop="event_id" label="事件编号" />
        <el-table-column prop="event_type" label="事件类型"  />
        <el-table-column prop="event_level" label="事件等级" />
        <el-table-column prop="event_time" label="发生时间" />
        <el-table-column prop="event_location" label="发生地点" />
        <el-table-column prop="car_number" label="车牌号" />
        <el-table-column prop="driver_name" label="驾驶员" />
        <el-table-column prop="event_status" label="处理状态" />
      </el-table>
    </div>
    <div class="collapseContent">
      <button></button>
    </div>
  
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, computed,onMounted,getCurrentInstance} from "vue"
const {proxy}=getCurrentInstance()
import * as XLSX from 'xlsx'
import { useMapStore } from "../../stores/map.js"; 
import {arrToObjArr} from "../../hooks/usehooks.js"
const $mapStore = useMapStore()
const localData=computed(()=> $mapStore.tableData)
const chineseKeys=['事件编号','事件类型','事件等级','发生时间','发生地点','车牌号','驾驶员','处理状态']
const englishKeys=['event_id','event_type','event_level','event_time','event_location','car_number','driver_name','event_status']
// let heatMapLayer = null;
// 根据处理状态表格显示不同颜色
const statusMap = {
      '已处理': 'success',
      '未处理': 'danger',
      '进行中': 'info',
    };
const tableRowClassName = computed(() => {
      return ({ row }) => {
        const statusClass = statusMap[row.event_status];
        return `status-${statusClass}`;
      };
    });
//渲染到表格上的数据
const tableData=computed(()=>{
  return arrToObjArr(localData.value,englishKeys)
})
//导出excel表格的数据
const excelResult=computed(()=>{
 return arrToObjArr(localData.value,chineseKeys)
})
//导出excel表格
const exportTableData = () => {
  const worksheet = XLSX.utils.json_to_sheet(excelResult.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  XLSX.writeFile(workbook, 'exported_data.xlsx');
};
//汇总
const handleSummaryUp = () => {
  $mapStore.sortTableDataUp() 
}
const handleSummarydown = () => {
  $mapStore.sortTableDataDown() 
}
const tableDataRefresh = () => {
  $mapStore.refreshTableData() 
}

//生成热力图
const handleHeatMap = () => {
  $mapStore.setEventTableShow(false)
  $mapStore.find_source.clear()
  
  console.log(localData.value)
  // 创建热力图图层
  if ($mapStore.heatMapLayer) {
    proxy.$map.removeLayer($mapStore.heatMapLayer);
  }
  const features = localData.value.map(item => {
    return {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [item.bound.xmin, item.bound.ymin]
      },
      properties: {
        weight: item.event_level // 可以根据需要调整权重
      }
    };
  });
   $mapStore.heatMapSource = new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures({
      type: 'FeatureCollection',
      features: features
    })
  });
  $mapStore.heatMapLayer = new ol.layer.Heatmap({
    source: $mapStore.heatMapSource,
    blur: 30,
    radius: 25,
    weight: function (feature) {
      return feature.get('weight');
    }
  });

  proxy.$map.addLayer($mapStore.heatMapLayer);
};
</script>

<style scoped>
.event-table{
  position: absolute;
  top:10px;
  right:10px;
}
.dialog-content{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.el-dialog__title {
  color: #303133;
  font-size: 18px;
  font-weight: bolder;
}
:deep(.el-dialog){
  margin-top: 500px;
}
/* :deep(.el-dialog_header){
  margin-bottom: 20px;
} */
::v-deep .el-table .status-danger {
  background-color: #fef0f0; /* 浅红色 */
}

::v-deep .el-table .status-info {
  background-color: #f4f5f5; /* 灰色 */
}

::v-deep .el-table .status-success {
  background-color: #f0f9eb; /* 浅绿色 */
}
</style>